<template>
    <div style="display: flex; justify-content: center; background-color: #fff;" >
        <div style="width: 755px">
            <div style="width: 755px;">
                <div style="overflow: hidden;">
                    <div class="about-top">
                        <div style="color: #efefef; font-size: 24px;">Ruby Co., Ltd</div>
                    </div>
                </div>
                <div style="margin-top: 20px;">
                    <span style="font-size: 18px; color: #3498db; border-bottom: 2px solid #3498db; padding-bottom: 5px;">RubyProfile</span>
                    <div class="about-content">
                        <div style="margin-top: 20px; font-size: 15px;">{{ company.content_en }}</div>
                    </div>
                </div>
                <div style="margin-top: 20px;" class="animation-diy">
                    <span style="font-size: 18px; color: #3498db; border-bottom: 2px solid #3498db; padding-bottom: 5px;">CompanyNews</span>
                    <div style="margin-top:20px; background-color: #efefef; border-radius: 10px;">
                        <div style="padding: 5px; margin-left: 20px;" v-for="(item, index) in news" :key="index">
                            <span class="company-title" @click="() => router.push({path: '/en/news', query: {'id': item.id}})">{{ item.title_en }}</span>
                            <span style="font-size: 15px; color: #3498db; float: right;margin-right: 20px;">{{item.addtime}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { listNews, getCompanyInfo } from '@/requests/index';
import { ref } from 'vue';

const news = ref();
const company = ref({
    sel_tel: "",
    tech_tel: "",
    work_time: "",
    email: "",
    address: "",
    web: "",
    content: "",
});

const getNews = async() =>{
    const res = await listNews();
    if (res.status === 2000){
        news.value = res.data;
    }else{
        console.log("error")
    }
};

getNews();


const forCompanyInfo = async () => {
  const res = await getCompanyInfo();
  if (res.status === 2000) {
    company.value = res.data;
  };
};
forCompanyInfo();
const router = useRouter();
</script>
<style>
.about-content {
    font-size: 12px;
    text-indent: 3em;
    display: block;
}
.animation-diy{
    transition: cubic-bezier(0.215, 0.610, 0.355, 1);
}

.about-top{
    width:100%;
    height:100px;
    font-size:14px;
    line-height:100px;
    text-align:center;
    background: linear-gradient(to right, rgb(33, 147, 176), rgb(109, 213, 237));
    border-radius: 5px;
    background-size:100% 100%;
    margin-bottom: 20px;
    padding:3px 0 ; 
}

.company-title{
    margin-left: 10px; 
    font-size: 15px; 
    cursor: pointer;
}
.company-title:hover{
    color: #bf471f;
}
</style>